﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Pagination 分页表格</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />

    
    <script src="../../scripts/boot.js" type="text/javascript"></script>
    
    <style>
    .currencycell, .currencycell .mini-grid-cell-inner
    {
        padding:0;
    }
       
    .currency_table
    {
        position:relative;
        text-align:center;
        /*border-collapse:collapse;*/
        table-layout:fixed;
        display:table;
        width:100%; 
        height:22px;
    }
    .currency_table td
    {
        border-right:solid 1px #ccc;
    }
    
    </style>
        
</head>
<body >
    <h1>CurrencyFormatter 栅格货币格式化 </h1>      

   

<div id="datagrid1" class="mini-datagrid" style="width:600px;height:250px;" 
    url="../data/AjaxService.aspx?method=SearchEmployees"  idField="id" 
>
    <div property="columns">
        <div type="indexcolumn" ></div>
        <div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号</div>    
        <div field="name" width="120" headerAlign="center" allowSort="true">姓名</div>                            
        <div field="salary" width="150" allowSort="true">薪资</div>                                        
        <div field="createtime" width="100" headerAlign="center" dateFormat="yyyy-MM-dd" allowSort="true">创建日期</div>                
    </div>
</div>   
   
    <script type="text/javascript">
        
        mini.parse();


        var grid = mini.get("datagrid1");


        grid.load();

        //栅格格式化货币
        function currencyFormatter(num) {
            num = parseFloat(num);          

            var arr = [
                {}, {}, {color: 'green'},
                {}, {}, {color: 'green'},
                {}, {}, {color: 'red'},
                {}, {}
            ];

            if (!isNaN(num)) {
                num = num.toFixed(2);
                var ss = String(num).replace('.', '').split('');
                var count = ss.length;

                var index = 0;
                for (var i = arr.length - 1; i >= 0; i--) {
                    var o = arr[i];
                    var s = ss[count - 1 - index++];
                    if (s) o.value = s;
                }
            }

            var sb = [];
            sb.push('<table class="currency_table" cellspacing="0" cellpadding="0" border="0"><tr>');

            for (var i = 0, l = arr.length; i < l; i++) {
                var o = arr[i];
                sb[sb.length] = '<td style="';
                if (o.color) {
                    sb[sb.length] = 'border-color:' + o.color + ";";
                }
                if (i == arr.length-1) {
                    sb[sb.length] = "border-width:0;";
                }
                sb[sb.length] = '">';
                sb[sb.length] = o.value || '&nbsp;';
                sb[sb.length] = '</td>';
            }

            sb.push('</tr></table>');            
            return sb.join('');
        }

        grid.on("drawcell", function (e) {
            
            if (e.field == "salary") {

                e.cellCls = "currencycell";
                e.cellHtml = currencyFormatter(e.value);
            }
        });

        
    </script>

    <div class="description">
        <h3>Description</h3>
        
    </div>


  

</body>
</html>